<<template>
  <div v-if="pd" class="header">
    <input type="text" placeholder="搜索...">
    <el-icon class="search-icon"><Search /></el-icon>
  </div ><!--      搜索框-->
  <div v-if="pd" class="main">
    <div class="banner">
      <el-carousel height="180px" motion-blur>
        <el-carousel-item v-for="item in imgSrc" :key="item">
          <img :src="item" style="width: 100%; height: 100%; object-fit: cover;" alt="图片加载错误">
        </el-carousel-item>
      </el-carousel>
    </div><!--        轮播图-->
    <hr style="height: 2px;margin:10px auto; background-color: #cccccc;width:calc(100% - 20px)">
    <div class="icon-grid">
      <div
          v-for="(item, index) in iconList"
          :key="index"
          class="icon-item"
          @click="handleItemClick(item)"
      >
        <el-icon :size="24">
          <component :is="item.iconComponent" />
        </el-icon>
        <p>{{ item.text }}</p>
      </div>
    </div><!--        按钮功能区-->
    <h3 style="text-align: center;height: 30px;background-color: #f3f0f0;font-weight: bold">每周上新</h3>
    <div class="newShops">
      <div v-for="(item,index) in newshopList" :key="index" class="shop-item">
        <h4>{{item.name}}</h4>
        <div class="price-row">
          <img :src="money" style="height: 15px;width: 15px;">
          <h4 style="margin-top: -6px;font-style: italic">{{item.price}}</h4>
        </div>
        <img class="product-image" :src="item.imgSrc" style="width: 70px;height: 70px">
      </div>
    </div><!--        每周上新-->
    <h3 style="text-align: center;height: 30px;background-color: #f3f0f0;font-weight: bold">人气推荐</h3>
    <div class="topShops">
      <div v-for="(item,index) in topList" :key="index" class="topshop-item">
        <h4>{{item.name}}</h4>
        <h4 style="color: #a5a5a5">{{item.msg}}</h4>
        <div class="top-price-row" >
          <img :src="money" style="height: 15px;width: 15px;margin-left: 10px">
          <h4 style="margin-left: 0;margin-top: -5px;font-style: italic">{{item.price}}</h4>
        </div>
        <img class="top-product-image" :src="item.imgSrc" style="width: 70px;height: 70px">
      </div>
    </div><!--        人气推荐-->
    <hr style="height: 2px;margin:10px auto; background-color: #cccccc;width:calc(100% - 20px)">
    <div class="shop-container">
      <div class="shop" v-for="(item,index) in shopList" :key="index">
        <img :src="item.imgSrc" class="shop-image">
      </div>
    </div><!--        商品-->
  </div>
</template>

<script setup lang="ts">
import { Avatar,Coin,WalletFilled,Sell,Calendar,CameraFilled,Orange,Goods,Shop,BellFilled,Search,HomeFilled,Menu,ChatDotRound,ShoppingCart,User} from '@element-plus/icons-vue'
import {ref} from 'vue'
import {useRouter} from 'vue-router'
import banner1 from '@/assets/banner1.jpg'
import banner2 from '@/assets/banner2.jpg'
import banner3 from '@/assets/banner3.jpg'
import shop1 from '@/assets/newshop1.jpg'
import shop2 from '@/assets/newshop2.jpg'
import shop3 from '@/assets/newshop3.jpg'
import shop4 from '@/assets/newshop4.jpg'
import top1 from '@/assets/top1.jpg'
import top2 from '@/assets/top2.jpg'
import top3 from '@/assets/top3.jpg'
import top4 from '@/assets/top4.jpg'
import money from '@/assets/money.jpg'
const activeKey = ref('home')
let router = useRouter()
let imgSrc = ref([banner1,banner2,banner3])
let pd = ref(true)

let iconList = ([
  {iconComponent:BellFilled,text:'今日爆款'},
  {iconComponent:Shop,text:'好物分享'},
  {iconComponent:Goods,text:'推荐购买'},
  {iconComponent:Orange,text:'购物心得'},
  {iconComponent:CameraFilled,text:'直播专区'},
  {iconComponent:Calendar,text:'签到中心'},
  {iconComponent:Sell,text:'值得购买'},
  {iconComponent:WalletFilled,text:'每日优惠'},
  {iconComponent:Coin,text:'充值中心'},
  {iconComponent:Avatar,text:'我的客服'},
])//图标列表
let newshopList = ref([
  {name:'小棕熊玩偶',price:199.18,imgSrc:shop1},
  {name:'纯皮沙发',price:2999.99,imgSrc:shop2},
  {name:'运动水杯',price:69.59,imgSrc:shop3},
  {name:'无线鼠标',price:9.99,imgSrc:shop4},
])//每周上新列表
let topList = ref([
  {name:'摇摇马',price:26.66,imgSrc:top1,msg:"安全，舒适，好玩"},
  {name:'魔方',price:16.03,imgSrc:top2,msg:"有助于锻炼逻辑能力，青少年爱不释手"},
  {name:'蚕丝被',price:888.98,imgSrc:top3,msg:"天然蚕丝制作而成，简约而不简单"},
  {name:'路虎汽车',price:588888,imgSrc:top4,msg:"男人的嘴"},
])//人气推荐列表
let shopList = ref([
  {name:'摇摇马',price:26.66,imgSrc:top1,msg:"安全，舒适，好玩"},
  {name:'小棕熊玩偶',price:199.18,imgSrc:shop1},
  {name:'魔方',price:16.03,imgSrc:top2,msg:"有助于锻炼逻辑能力，青少年爱不释手"},
  {name:'纯皮沙发',price:2999.99,imgSrc:shop2},
  {name:'蚕丝被',price:888.98,imgSrc:top3,msg:"天然蚕丝制作而成，简约而不简单"},
  {name:'运动水杯',price:69.59,imgSrc:shop3},
  {name:'路虎汽车',price:588888,imgSrc:top4,msg:"男人的嘴"},
  {name:'无线鼠标',price:9.99,imgSrc:shop4},
])//商品列表
function handleItemClick(item:any) {

}//轮播图事件
</script>

<style scoped>
.main {
  overflow-y: auto;
  height: calc(100vh - 120px);
}
.shop-container {
  display: flex;
  flex-wrap: wrap;
  gap: 15px; /* 图片间距 */
  justify-content: space-between; /* 两端对齐 */
}

.shop {
  width: calc(50% - 8px); /* 减去一半的gap值 */
  aspect-ratio: 1/1; /* 保持正方形，可选 */
}

.shop-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例 */
  border-radius: 8px; /* 圆角 */
  box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* 阴影 */
}
.topShops {
  display: flex;
  flex-wrap: wrap;
}

.topshop-item {
  width: 400px;
  height: 100px;
  display: flex;
  position: relative;
  flex-direction: column;
  border: 2px solid #eee;
  border-radius: 8px;
  padding: 10px 10px 10px 80px;
}

.topshop-item h4 {
  margin-left: 10px;
}

.top-price-row {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 25px;
}

.top-product-image {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 70px;
  height: calc(100% - 20px);
  object-fit: cover;
  border-radius: 4px;
}
.newShops {
  display: flex;
  flex-wrap: wrap;
}

.shop-item {
  height: 90px;
  position: relative;
  border: 2px solid #eee;
  padding: 10px;
  width: 400px;
  border-radius: 8px;
}

.price-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  font-size: 25px;
}

.product-image {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 50px;
  height: calc(100% - 20px);
  object-fit: cover;
}
.icon-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 10px;
}
.icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 20%;
  margin-bottom: 15px;
}

.icon-item p {
  margin-top: 5px;
  font-size: 14px;
  color: #333;
}
.header {
  position: relative;
  padding: 0;
}
input {
  height: 35px;
  width: calc(100% - 30px);
  margin: 13px 16px;
  border: 1px solid #cccccc;
  border-radius: 5px;
  padding-left: 40px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

  box-sizing: border-box;
}
.search-icon {
  position: absolute;
  left: 25px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
}

</style>